<template>
  <el-dialog
    v-toggle-full
    class="base-dialog"
    :class="{ readonly: done !== false }"
    :custom-class="customClass"
    :title="title"
    :visible.sync="isShowDialog"
    :append-to-body="true"
    :before-close="handleCloseDialog"
    @closed="closedDialog"
  >
    <div v-if="nextOrPrev === true" class="main-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="dataList.BusinessForm" name="first">
          <component
            :is="dynamicAuditComponent"
            :ref="dynamicAuditComponent"
            :active-name.sync="activeName"
            :page-info.sync="pageInfo"
            :edit-id.sync="dataId"
            :task-data.sync="taskData"
            :report-data.sync="reportData"
            :row.sync="row"
            :from-source="fromSource"
            @passOrNoPassEmit="passOrNoPassEmit"
          />
          <div v-if="done">{{ row.remark }}</div>

          <div v-else>
            <div class="remark">{{ dataList.LeaveAMessage }}</div>
            <el-input v-model="remark" type="textarea"></el-input>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="dataList.ApprovalProcess" name="second">
          <ExperimentTemplateEdit
            v-if="activeName == 'second' && refurbish == true"
            ref="ExperimentTemplateEdit"
            :active-name.sync="activeName"
            :page-info.sync="pageInfo"
            :page-type="history"
            :row="row"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <span v-if="done === false" slot="footer" class="base-dialog-footer">
      <el-button v-loading="submitLoad" type="primary" @click="pass"
        >{{ btn.Pass }}</el-button
      >
      <el-button type="danger" @click="chehuiDialog">{{ btn.Reject }}</el-button>
      <el-button
        v-if="
          rowList.map((item) => item.auditDataId).indexOf(row.auditDataId) > 0
        "
        type="danger"
        class="btn"
        @click="prev"
        >{{ dataList.Previous }}</el-button
      >
      <el-button v-else plain disabled>{{ dataList.Previous }}</el-button>
      <el-button
        v-if="
          rowList.map((item) => item.auditDataId).indexOf(row.auditDataId) <
          rowList.length - 1
        "
        type="danger"
        class="btn"
        @click="next"
        >{{ dataList.Next }}</el-button
      >
      <el-button v-else plain disabled>{{ dataList.Next }}</el-button>
    </span>

    <el-dialog
      v-if="isShowChildDialog"
      class="base-dialog"
      :custom-class="' panna-dialog_small'"
      :title="dataList.RejectCause"
      :visible.sync="isShowChildDialog"
      :append-to-body="true"
      :before-close="handleCloseChildDialog"
      @closed="closedChildDialog"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        :model="ruleForm"
      >
        <el-form-item :label="dataList.RejectCause" prop="remark">
          <el-input
            v-if="row.auditStatus !== 30"
            v-model="ruleForm.remark"
            type="textarea"
            maxlength="80"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="noPass">{{ btn.Confirm }}</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import ExperimentTemplateEdit from "./ExperimentTemplateEdit.vue";
import { loadAllComponent } from "@/components/AuditComponents/index.js";
export default {
  name: "WorkFlowGetDetailDialog",
  components: {
    ExperimentTemplateEdit,
  },
  props: {
    done: {
      type: Boolean,
      default: false,
    },
    isShowDialog: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    row: {
      type: Object,
      default: () => {},
    },
    rowList: {
      type: Array,
      default: () => [],
    },
    taskData: {
      type: Object,
      default: () => {},
    },
    reportData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      refurbish: true,
      isShowChildDialog: false,
      ruleForm: {
        remark: "",
      },
      id: "",
      dataId: "",
      rules: {
        remark: [
          { required: true, message: "驳回原因必须填写", trigger: "blur" },
          {
            min: 1,
            max: 80,
            message: "长度在 1 到 80 个字符",
            trigger: "blur",
          },
        ],
      },

      customClass: "panna-dialog_big",
      pageType: "",
      fromSource: "verify",
      dynamicAuditComponent: null, // 定义动态审核组件
      nextOrPrev: true,
      queryForm: { entrustTaskIdList: 0 },
      remark: "",
      history: "init",
      activeName: "first",
      pageInfo: {
        total: 0,
        pageIndex: 1,
        pageSize: 10,
      },
      submitLoad: false,
      dataForm: {},
      readOnly: false,
      title: "查看详情",
      total: 0,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleWorkFlow.buttons");
    },
    dataList() {
      return this.$t("ModuleWorkFlow.WorkFlow");
    },
  },
  mounted() {
    this.title = this.row.content;
    this.dataId = this.row.auditDataId;
    this.pageType = this.row.dialogWindowEdit;
    // this.customClass = this.row.className;
    this.autoLoadAuditComponent(this.pageType);
  },
  created() {
    loadAllComponent();
  },
  methods: {
    chehuiDialog() {
      this.isShowChildDialog = true;
    },
    // 动态加载组件
    autoLoadAuditComponent(value) {
      this.dynamicAuditComponent = value;
    },

    handleClick() {},
    init() {
      this.id = this.editId;
      this.title = this.$t("ModuleWorkFlow.buttons.Look");
    },
    passOrNoPassEmit() {
      this.ruleForm.remark = "";
      this.$emit("update:isShowDialog", false);
      this.isShowChildDialog = false;
      this.$emit("getList");
    },

    // 通过
    pass() {
      var obj = {};
      obj.auditDataId = this.row.auditDataId;
      obj.remark = this.remark;
      obj.dataGroup = this.row.dataGroup;
      this.$refs[this.dynamicAuditComponent].innerPass(obj);
    },
    // 不通过
    noPass() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var obj = {};
          obj.auditDataId = this.row.auditDataId;
          obj.remark = this.ruleForm.remark;
          obj.dataGroup = this.row.dataGroup;
          this.$refs[this.dynamicAuditComponent].innerReject(obj);
        } else {
          return false;
        }
      });
    },
    next() {
      // 所有数据进行筛选 rowList
      const index = this.rowList
        .map((item) => item.auditDataId)
        .indexOf(this.row.auditDataId);
      if (index === this.rowList.length - 1) {
        this.$message.warning(this.$t("ModuleWorkFlow.WorkFlow.thelastpieceofdata"));
        return;
      } else {
        this.row = this.rowList[index + 1];
        this.editId = this.row.auditDataId;
        this.dataId = this.row.auditDataId;
        this.title = this.row.title;
        this.nextOrPrev = false;
        this.pageType = this.row.dialogWindowEdit;
        this.autoLoadAuditComponent(this.pageType);
        this.$nextTick(() => {
          this.nextOrPrev = true;
        });
      }
    },
    prev() {
      const index = this.rowList
        .map((item) => item.auditDataId)
        .indexOf(this.row.auditDataId);
      if (index === 0) {
        this.$message.warning(this.$t("ModuleWorkFlow.WorkFlow.thelastpieceofdata"));
        return;
      } else {
        this.row = this.rowList[index - 1];
        this.editId = this.row.auditDataId;
        this.dataId = this.row.auditDataId;
        this.title = this.row.title;
        this.nextOrPrev = false;
        this.pageType = this.row.dialogWindowEdit;
        // this.customClass = this.row.className;
        this.autoLoadAuditComponent(this.pageType);
        this.$nextTick(() => {
          this.nextOrPrev = true;
        });
      }
    },

    // 操作成功回调用
    successfulOperation() {
      this.$emit("success");
      this.$emit("getList");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    // 关闭客户弹框没保存
    handleCloseDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$emit("update:isShowDialog", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
    },
    handleCloseChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
    closedChildDialog() {
      this.$refs["ruleForm"].resetFields();
      this.isShowChildDialog = false;
    },
  },
};
</script>
<style lang="scss">
.elasticity {
  display: flex;
  flex-direction: column;
}
.base-dialog .el-dialog__title {
  display: block;
  box-sizing: border-box;
  padding: 0 100px;
}
.base-dialog .el-dialog__body {
  flex: 1;
  min-height: 0;
}
</style>

<style lang="scss" scoped>
.remark {
  color: #666666;
  font-weight: 700;
  font-size: 17px;
}
.btn {
  background-color: white;
  color: #1890ff;
  border-color: #1890ff;
}
.avatar-pane {
  height: 500px;
}

::v-deep .el-collapse-item__header {
  height: 38px;
  line-height: 20px;
  padding: 4px;
  background-color: #f1f8ff;
}

::v-deep .el-collapse-item__content {
  padding-top: 25px;
  padding-bottom: 12.5px;
}
</style>
